<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="./lib/element-plus.css">
    <script src="./lib/vue3.4.21.js"></script>
    <script src="./lib/element-plus.js"></script>
    <script src="./lib/axios.min.js"></script>
</head>
<style>
    .avatar{
        width:300px;
        height:auto;
    }
</style>
<body>
    </pre>
    <div id="app">
       <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        label-width="150px"
        class="demo-ruleForm"
      >
        <el-upload
            class="avatar-uploader"
            action="http://127.0.0.1:8088/api/news/upload"
            :show-file-list="true"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            
            >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <el-text style="font-size:100px;">+</el-text>
        </el-upload>
      </el-form>

    </div>
    <script type="module">
        const service = axios.create({
            baseURL: 'http://127.0.0.1:8088',
            timeout: 10000,
            headers: { 
                'Content-Type': 'application/json;charset=UTF-8'
            }
        })
        
        const { ElMessage } = ElementPlus
        var c = 0;
        const app = Vue.createApp({
            //响应式变量
            data(){
                return {
                    imageUrl:''
                }
            },
            //方法 
            methods:{
                beforeAvatarUpload(){

                },
                handleAvatarSuccess(res){
                    this.imageUrl = res.url
                }
            },
            //初始化事件
            mounted(){
                
            }
        }).use(ElementPlus).mount("#app");
    </script>

<pre>
  
</body>
</html>